<template>
  <div class="settings-phone">
    <settings-detail-template
      @save="saveSettings" 
      @click="handleHideLayer"
      :name="name">
      <div class="form-wrapper">
        <form class="form box-shadow">
          <input-item 
            :title="'用户名'" 
            :placeholder="'请输入账户名'"
            @input="updateAccountName"
            >
          </input-item>
          <div @click="chooseBankName">
            <input-item 
              class="bank-name"
              :readonly="readonly"
              :title="'银行类型'" 
              :chooseVal="bankName"
              :placeholder="'请选择银行'"
              @input="updateBankName"
              >
              <span class="icon-bank">
                <i class="iconfont iconacbar_tianjia"></i>
              </span>
            </input-item>
          </div>
          <input-item 
            :title="'银行卡号'" 
            :placeholder="'请输入银行卡号'"
            @input="updateAccountNo"
            >
          </input-item>
          <input-item 
            :title="'开户行'" 
            :placeholder="'请输入开户行信息'"
            @input="updateBankAdd"
            >
          </input-item>
        </form>
        <bc-modal v-show="showBankNames">
          <slide-up-questions
            :dataList="questions" 
            :show="showBankNames" 
            @hide="hide"
            @click="updateBankName">
          </slide-up-questions>
        </bc-modal>
      </div>
    </settings-detail-template>
    
  </div>
</template>
<script>
import SettingsDetailTemplate from './settings-detail-template'
import InputItem from '@/pages/login/components/input-item'
import BcModal from '@/components/base/bc-modal/bc-modal'
import SlideUpQuestions from '@/components/slide-up-questions/slide-up-questions'
export default {
  components: {
    SettingsDetailTemplate,
    InputItem,
    BcModal,
    SlideUpQuestions
  },
  data() {
    return {
      name: '银行卡',
      readonly: true,
      accountName: '',
      bankName: '',
      accountNo: '',
      bankAdd: '',
      errorMsg: '',
      showBankNames: false,
      questions:  [
          {
            id: 1,
            content: '中国农业银行'
          },
          {
            id: 2,
            content: '中国建设银行'
          },
          {
            id: 3,
            content: '中国银行'
          },
          {
            id: 4,
            content: '招商银行'
          },
          {
            id: 5,
            content: '交通银行'
          },
          {
            id: 6,
            content: '邮政储蓄银行'
          },
          {
            id: 7,
            content: '中国民生银行'
          },
          {
            id: 8,
            content: '中国工商银行'
          },
        ],
      saved : false
      
    }
  },
  methods: {
    updateAccountName(val) {
      this.accountName = val
    },
    updateAccountNo(val) {
      this.accountNo = val
      // this.phoneNo = val
    },
    updateBankName(val) {
      this.bankName = val
      this.showBankNames = false
    },
    updateBankAdd(val) {
      this.bankAdd = val
      // this.phoneNo = val
    },
    saveSettings() {
      if (this.accountName == ''||this.accountNo == ''||this.bankName == ''||this.bankAdd == '') {
        this.errorMsg = 'xxx'
      }
      else{
        this.saved = true
        this.$emit('pop',"保存成功")
        let data = {
          accountName: this.accountName,
          accountNo: this.accountNo,
          bankName: this.bankName,
          bankAdd: this.bankAdd
        }

      }
    },
    handleHideLayer() {
      if(this.saved != false){
        this.$emit('click')
      }
      else{
        this.$emit('pop',"未修改")
        this.$emit('click')
      }
    },
    chooseBankName() {
      this.showBankNames = true
    },
    hide() {
      this.showBankNames = false 
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .settings-phone 
    .form-wrapper 
      box-sizing border-box 
      padding 10px
    .form 
      border-radius 3px
      background #fff
      border 1px solid $color-divide-line
      .bank-name >>> .icon 
        display none
      .icon-bank 
        width 16px 
        height 16px 
        border-radius 50% 
        background-color #cccdd0 
        display flex 
        align-items center 
        justify-content center
        .iconfont 
          color #fff 
          font-size 12px
    .get-code 
      margin-left 10px 
      color $color-theme-dark
</style>